//@ts-nocheck
import { useParams } from "react-router-dom"
import { setbookxq } from "./API";
import { useEffect ,useState} from "react";
import {NavBar} from "antd-mobile"
import { useNavigate } from "react-router-dom";
import style from "../css/bookxq.module.css"
export default ()=>{
    let params=useParams();
    let [list,setList]=useState({})
    let nav=useNavigate();
    let bookxq=async ()=>{
        let a={goods_id:params.id?.split("=")[1]};
        let {data}=await setbookxq(a);
        console.log(data);
        list=data.data;
        setList({...list})
    }
    let back=()=>{
        nav(-1)
    }
    useEffect(()=>{
        bookxq()
    },[])
    return (
      <div>
        <NavBar
          style={{
            "--height": "44px",
            "--border-bottom": "1px #eee solid",
          }}
          onBack={back}
        >
          书籍详情
        </NavBar>
        <div className={style.box}>
          <div
            style={{
              display: "flex",
              marginTop: "20px",
              marginLeft: "20px",
              height: "260px",
            }}
          >
            <img width={"120px"} height={"160px"} src={list.goods_img} alt="" />
            <div style={{ marginLeft: "20px" }} className={style.d1}>
              <h2>{list.goods_name}</h2>
              {!list.label_list
                ? ""
                : list.label_list.map((item) => {
                    return (
                      <button
                        className={style.but}
                        key={item.id}
                        style={{
                          position: "relative",
                          backgrooundColor: "blue",
                        }}
                      >
                        {item.label_name}
                      </button>
                    );
                  })}
              <p>作 者 &nbsp;： {list.author}</p>
              <span>出版社：{list.press_name}</span>
              <div>
                <a href={list.mmq_buy_link}>购买实体绘本</a>
              </div>
            </div>
          </div>
          <div className={style.d2}>
            {!list.goods_ability_list
              ? ""
              : list.goods_ability_list.map((item) => {
                  return (
                    <p key={item.id}>
                      {" "}
                      {item.title}: <span>{item.score}</span>
                    </p>
                  );
                })}
          </div>
          <div className={style.box2}>
            <h2>简介</h2>
            <div dangerouslySetInnerHTML={{ __html: list.goods_desc }}></div>
          </div>
        </div>
      </div>
    );
}